<template>
  <div>
    <table class="it-table-header" style="width: 100%">
      <ColGroup :cols="cols"></ColGroup>
      <thead class="it-table-header-thead">
        <tr>
          <th
            v-for="(item, index) in cols"
            :key="`it-table-thead-${index}`"
            :class="thClass(item)"
          >
            {{ item.label }}
          </th>
        </tr>
      </thead>
    </table>

    <table class="it-table-body" :style="bodyStyle">
      <ColGroup :cols="cols"></ColGroup>
      <tbody class="it-table-body-tbody">
        <tr
          v-for="(item, index) in dataSource"
          :key="index + 1"
          @click="handleClick(item)"
        >
          <td v-for="v in cols" :key="v.key" class="text-center">
            {{ item[v.key] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script name="ItTable" setup>
import { computed } from 'vue'
import ColGroup from './ColGroup.vue'
// import TableHeader from "./TableHeader.vue";

const props = defineProps({
  cols: {
    type: Array,
    default: () => [],
  },
  dataSource: {
    type: Array,
    default: () => [],
  },
  options: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const bodyStyle = computed(() => {
  if (props.options && props.options.maxHeight) {
    return `width: 100%;maxHeight:${props.maxHeight};`
  } else {
    return `width: 100%;`
  }
})

const thClass = (item) => {
  let align = `text-${item['headerAlign'] || item['align'] || 'center'}`

  let name = [align]
  return name
}

const emits = defineEmits(['rowClick'])
const handleClick = (v) => {
  emits('rowClick', v)
}
</script>
<style scoped>
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
table {
  border-collapse: collapse;
}
.it-table-header-thead {
  height: 46px;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  box-shadow: 0px 2px 4px rgba(32, 110, 242, 0.2);
  border-radius: 0px;
  font-size: 16px;
  color: #00165d;
}
.it-table-body-tbody tr {
  border-bottom: 1px solid #e9eeff;
  height: 46px;
  font-size: 16px;
  color: #666666;
  cursor: pointer;
}
.it-table-body-tbody tr:hover,
.it-table-body-tbody tr:active {
  background: #f5f7fe;
  font-size: 18px;
  font-family: Source Han Sans CN-Medium;
  font-weight: 500;
  color: #00165d;
}
</style>
